<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="container">1</span>
<button id="button">点击加 1</button>
<script>
    var obj = {
        value: 1
    };

    //外部定义法
    // 储存 obj.value 的值
    // var value = 1;
    //
    // Object.defineProperty(obj, "value", {
    //   get: function() {
    //     return value;
    //   },
    //   set: function(newValue) {
    //     value = newValue;
    //     document.getElementById('container').innerHTML = newValue;
    //   }
    // });

    //封装函数
    // var watch = function (obj, name, func) {
    //   var value = obj[name];
    //   Object.defineProperty(obj, name, { //也可以用Reflect.defineProperty
    //     get: function () {
    //       return value;
    //     },
    //     set: function (newValue) {
    //       value = newValue;
    //       func && func(newValue);
    //     }
    //   });
    // };

    // watch(obj, 'value', function (newValue) {
    //   document.getElementById('container').innerHTML = newValue;
    // });

    var watch = function (obj, func) {
        var proxy = new Proxy(obj, {
            get: function (target, prop) {
                return target[prop];
            },
            set: function (target, prop, value) {
                target[prop] = value;
                func && func(prop, value);
            }
        });
        return proxy;
    };

    var proxy = watch(obj, function (key, newValue) {
        if (key === 'value') {
            document.getElementById('container').innerHTML = newValue;
        }
    });

    document.getElementById('button').addEventListener("click", function () {
        proxy.value += 1;
    });
</script>
</body>
</html>
